// 导入React
import React from 'react';

/**
 * 受控组件示例
 * 注意 复选框 是根据 checked 属性获取状态值的
 */
export class App extends React.Component {
  constructor() {
    super();
    // 表单状态
    this.state = {
      txt: 'xx',
      content: 'textarea',
      city: 'bj',
      isCheckeked: true,
      gender: '女',
    };
  }

  //   // 文本变化
  //   handleTxt = (e) => {
  //     // 改变state
  //     this.setState({
  //       txt: e.target.value,
  //     });
  //   };
  //   // 文本域
  //   handleContent = (e) => {
  //     // 设置文本域的变化
  //     this.setState({
  //       content: e.target.value,
  //     });
  //   };
  //   // 城市选择
  //   handleCity = (e) => {
  //     this.setState({
  //       city: e.target.value,
  //     });
  //   };
  //   // 复选框
  //   handleIsChecked = (e) => {
  //     this.setState({
  //       isCheckeked: e.target.checked,
  //     });
  //   };
  //   // 性别 radio
  //   handeGender = (e) => {
  //     this.setState({
  //       gender: e.target.value,
  //     });
  //   };

  handleChange = (e) => {
    console.log(e.target.name);
    console.log(e.target.type);
    console.log('e.target.dataset', e.target.dataset.xxx);
    // 区分一下checkbox
    if (e.target.type === 'checkbox') {
      this.setState({
        [e.target.name]: e.target.checked,
      });
    } else {
      // 修改对应的状态
      this.setState({
        [e.target.name]: e.target.value,
      });
    }
  };

  render() {
    return (
      <div>
        {/* 文本框 */}
        <input
          name="txt"
          data-xxx="xxx"
          data-yyy="yyy"
          type="text"
          value={this.state.txt}
          onChange={this.handleChange}
        ></input>
        <hr />

        {/* 文本域 */}
        <textarea
          name="content"
          value={this.state.content}
          onChange={this.handleChange}
        ></textarea>
        <hr />

        {/* 下拉框 */}
        <select
          name="city"
          value={this.state.city}
          onChange={this.handleChange}
        >
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <hr />

        {/* 复选框 */}
        <input
          name="isCheckeked"
          type="checkbox"
          checked={this.state.isCheckeked}
          onChange={this.handleChange}
        ></input>
        <hr />

        {/* radio */}
        <div>
          男
          <input
            type="radio"
            name="gender"
            value="男"
            checked={this.state.gender === '男'}
            onChange={this.handleChange}
          />
          女
          <input
            type="radio"
            name="gender"
            value="女"
            checked={this.state.gender === '女'}
            onChange={this.handleChange}
          />
        </div>
        <hr />
        <button onClick={() => console.log(this.state)}>提交</button>
      </div>
    );
  }
}

export default App;
